<template>
  <div class="payment">
    <div class="warper">
      <!-- <div class="payment_head">
        <img :src="logo" alt class="logo" /> 
        <span class="tepayment_head_title">收银台</span>
      </div> -->
      <div class="payment_content">
        <!-- <el-steps :space="200" :active="active" finish-status="success" simple align-center>
          <el-step title="确认订单"></el-step>
          <el-step title="在线支付"></el-step>
          <el-step title="支付成功"></el-step>
        </el-steps> -->
        <div class="payment_head">
          <!-- <img :src="logo" alt class="logo" />  -->
          <!-- <span class="tepayment_head_title">收银台</span> -->
          <span v-if="type == 'recharge' || type == 'buyVip' || type == 'reward'" class="tepayment_head_title">{{tableData&&tableData.length?tableData[0].name:''}}</span>
          <span v-else class="tepayment_head_title">{{ tableData&&tableData.length?tableData[0].order_number:'' }}</span>
        </div>
        <el-steps :active="active" align-center>
          <el-step title="确认订单" description=""></el-step>
          <el-step title="在线支付" description=""></el-step>
          <el-step title="支付成功" description=""></el-step>
        </el-steps>

        <!-- 确认订单信息页面 -->
        <div v-if="active == 0" class="pay_confirm">
          <span class="payment_title">交易信息</span>
          
          <table class="mailTable" v-if="type == 'recharge' || type == 'buyVip' || type == 'reward'">
            <tr>
              <td class="column">商品名称</td>
              <td>{{tableData&&tableData.length?tableData[0].name:''}}</td>
            </tr>
            <tr>
              <td class="column">小计(元)</td>
              <td>{{tableData&&tableData.length?tableData[0].money:''}}</td>
            </tr>
          </table>

          <!-- 案件信息 -->
          <table class="mailTable" v-else>
            <template v-if="isZAorZB.type == 'ZY'">
              <tr>
                <td class="column">订单类型</td>
                <td class="orderTitle">费用</td>
                <td class="orderTitle">金额</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>官费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].gov_money:'' }}</td>
              </tr>
              <tr>
                <td class="column orderColor">{{ order_type }}</td>
                <td>平台费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].agent_money:'' }}</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>小计(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].count_money:'' }}</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>手续费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].pay_service_harge:'' }}</td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td class="column">订单类型</td>
                <td class="orderTitle">费用</td>
                <td class="orderTitle">金额</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>官费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].gov_money:'' }}</td>
              </tr>
              <tr>
                <td class="column orderColor">{{ order_type }}</td>
                <td>{{isZAorZB.value}}(元)
                </td>
                <td>{{ isZAorZB.type == 'ZN' ? (tableData&&tableData.length?tableData[0].platform_money:'') : (tableData&&tableData.length?tableData[0].agent_money:'') }}</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>答复费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].reply_money:'' }}</td>
              </tr>
              <tr>
                <td class="column"></td>
                <td>手续费(元)
                </td>
                <td>{{ tableData&&tableData.length?tableData[0].pay_service_harge:'' }}</td>
              </tr>
            </template>
            <tr>
              <td class="column"></td>
              <td>总计(元)
              </td>
              <td class="column_money">{{ tableData && tableData.length?tableData[0].money:'' }}</td>
            </tr>
          </table>

          <span class="payment_title">付款说明</span>
          <div class="payment_explain">
            <template v-if="type == 'reward'">
              此付款为打赏金额，当发明人评分高于4.5分时，可以进行打赏。具体金额以发明人意愿为准。
            </template>
            <template v-else-if="type == 'recharge'">
              用户余额充值
            </template>
            <template v-else-if="type == 'buyVip'">
              购买vip付款
            </template>
            <template v-else>
              <template v-if="isZAorZB.type == 'ZY'">
                <span>官&emsp;费：
                  <div class='vip_Introduction' v-if="isF">
                      <span>官费是由国家知识产权局收取的费用。</span>
                      <span>专利申请费：<font class="font_success">{{isGovBreaks ? '135' : '900'}}</font>元。</span>
                      <span>发明实质审查费：<font class="font_success">{{isGovBreaks ? '375' : '2500'}}</font>元。</span>
                      <span>公布印刷费：<font class="font_success">50</font>元。</span>
                      <span>如权利要求书项超过<font class="font_success">10</font>项，每超一项收费<font class="font_success">150</font>元</span>
                  </div>
                  <!-- 非发明专利官费提示 -->
                  <div class='vip_Introduction' v-else>
                    <span>如权利要求书项超过<font class="font_success">10</font>项，每超一项收费<font class="font_success">150</font>元</span>
                  </div>
                </span><br />
                <span>平台费：
                  <span >案件撰写质控审核费、案件上报手续费</span>
                </span><br />
                <span>手续费：
                  <span>第三方支付平台收取<font class="font_success">0.6%</font>的手续费，余额支付不收取手续费<span v-if='showRefund'>，退款时将不会退还手续费</span>。</span>
                </span>
              </template>
              <template v-else>
                <span>官&emsp;费：
                  <span class='vip_Introduction' v-if="isF">
                      <span>官费是由国家知识产权局收取的费用。</span>
                      <span>专利申请费：<font class="font_success">{{isGovBreaks ? '135' : '900'}}</font>元。</span>
                      <span>发明实质审查费：<font class="font_success">{{isGovBreaks ? '375' : '2500'}}</font>元。</span>
                      <span>公布印刷费：<font class="font_success">50</font>元。</span>
                      <span>如权利要求书项超过<font class="font_success">10</font>项，每超一项收费<font class="font_success">150</font>元</span>
                  </span>
                  <!-- 非发明专利官费提示 -->
                  <span class='vip_Introduction' v-else>
                      <span>官费是由国家知识产权局收取的费用。</span>
                      <span>专利申请费：<font class="font_success">{{isGovBreaks ? '75' : '500'}}</font>元。</span>
                      <span>如权利要求书项超过<font class="font_success">10</font>项，每超一项收费<font class="font_success">150</font>元</span>
                  </span>
                </span><br />
                <span>{{isZAorZB.value}}：
                  <span v-if='isZAorZB.type == "ZY"'>平台费是您案件开票金额的百分之三十。</span>
                  <span v-if='isZAorZB.type == "ZN"'>案件撰写质控审核费、案件上报手续费。</span>
                  <span v-else >代理人案件撰写费、案件撰写质控审核费、专利案件维护费、案件上报手续费和案件答复补正撰写费</span>
                </span><br />
                <span>答复费：
                  <span>案件答复补正撰写费</span>
                </span><br />
                <span>手续费：
                  <span>第三方支付平台收取<font class="font_success">0.6%</font>的手续费，余额支付不收取手续费<span v-if='showRefund'>，退款时将不会退还手续费</span></span>
                </span>
              </template>
            </template>
          </div>

          <span class="payment_title">付款方式</span>
          <!-- 支付方式 -->
          <div class="payMethod">
            <!-- <el-radio v-model="payMethod" label="1" border disabled>
              <img :src="payLogo_Unionpay" class="payLogo" />
              <span>银联</span>
            </el-radio> -->
            <el-radio v-model="payMethod" label="2" border>
              <img :src="payLogo_WeChat" class="payLogo" />
              <span>微信</span>
            </el-radio>
            <el-radio v-model="payMethod" label="3" border>
              <img :src="payLogo_Alipay" class="payLogo" />
              <span>支付宝</span>
            </el-radio>
            <el-radio v-model="payMethod" :disabled="type == 'recharge'" label="4" border v-if='isShowPurse'>
              <img :src="pay_Purse" class="payLogo_purse" />
              <span>余额支付</span>
            </el-radio>
          </div>
        </div>
        
        <!-- <div class="payment_btn">
          <el-button v-if="showCancelPay" @click="cancelPay">取消订单</el-button>
          <el-button type="primary" v-if="active != 3 && active != 1 && active != 2" @click="next">确认订单</el-button>
          <el-button type="primary" v-if="payMethod == 4 && active == 1" @click="previous">上一步</el-button>
        </div> -->
        <!-- 扫码支付页面 -->
        <div v-if="active == 1 && payMethod != 3 && payMethod != 4" class="pay">
          <div class="payment_content_head mt20 ml20">
            <img :src="payLogo" alt class="pay_logo" />
            <span>{{`${payText}支付`}}</span>
          </div>
          <!-- 发起支付错误 -->
          <template v-if='isEorror'>
            <div class="payment_content_timeOut">
              <img :src="pay_error" alt="">
              <br />
              <span class="font_danger">发起支付失败</span>
              <br />
              <el-button class='timeOut_btns' type="primary" plain @click="previous">上一步</el-button>
              <el-button class='timeOut_btns' type="primary" @click="cancelPay">退出支付</el-button>
            </div>
          </template>

          <template v-else>
            <div class="payment_content_qrcode" v-if="!isPayTimtOut">
              <canvas ref="qrcode" class="qrcodeBox"></canvas>
              <br />
              <span class="pay_tips">
                请用
                <font class="font_success">{{`${payText}扫码扫描二维码`}}</font>完成支付
              </span>
            </div>
            <!-- 二维码超时 -->
            <div v-else class="payment_content_timeOut">
              <img :src="pay_warning" alt="">
              <br />
              <span class="font_warning">支付超时，请刷新页面重新支付!</span>
              <br />
              <el-button class='timeOut_btns' type="primary" @click="refresh">刷新</el-button>
            </div>
          </template>
        </div>
        <div class="payment_btn">
          <el-button v-if="showCancelPay && !isEorror" @click="cancelPay">取消支付</el-button>
          <el-button type="primary" v-if="active != 3 && active != 1 && active != 2" @click="next">确认支付</el-button>
          <el-button type="primary" v-if="payMethod == 4 && active == 1 && !isEorror" @click="previous">上一步</el-button>
        </div>
        <!-- 支付宝跳转中页面 || 余额支付中 -->
        <div v-if="active == 1 && (payMethod == 3 || payMethod == 4)" class="pay_success">
          <div class="payment_content_head mt20 ml20">
            <img :src="payLogo" alt class="pay_logo" />
            <span>{{`${payText}支付`}}</span>
          </div>
          <template v-if='isEorror'>
            <div class="payment_content_timeOut">
              <img :src="pay_error" alt="">
              <br />
              <span class="font_danger">发起支付失败</span>
              <br />
              <el-button class='timeOut_btns' type="primary" plain @click="previous">上一步</el-button>
              <el-button class='timeOut_btns'  type="primary" @click="cancelPay">退出支付</el-button>
            </div>
          </template>
          <div class="pay_success_img" v-else>
            <span>{{ payMethod == 3 ? '支付跳转中，请等待' : '正在使用余额支付，请等待' }}</span><i class="el-icon-loading ml10"></i>
          </div>
        </div>
        <!-- 支付宝支付成功页面 -->
        <div v-if="active == 3" class="pay_success">
          <div class="pay_success_img">
            <img :src="pay_success" alt />
            <br />
            <!-- <span class="font_success">支付成功</span> -->
            <span style="font-size:15px">支付成功，你将在<span style="color:red">{{jump_time}}</span>秒后进入首页</span>
          </div>
          <div class="btns">
            <el-button class type="primary" @click="cancelPay">回首页</el-button>
            <!-- <el-button class type="primary" @click="continueApply">继续申请</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode"; // 引入qrcode
import { getMyInfo } from "~/api/user";
	import aes from '~/util/aes.js'
export default {
  data() {
    return {
      jump_time: 5,
      order_type:'',
      tableData: [],
      payMethod: "3",
      logo: require("~/assets/img/head_logo.png"),
      payLogo_Alipay: require("~/assets/img/支付宝.svg"),
      payLogo_Unionpay: require("~/assets/img/银联.svg"),
      payLogo_WeChat: require("~/assets/img/微信.svg"),
      pay_WeChat: require("~/assets/img/微信支付.svg"),
      qrcode: require("~/assets/img/testQrcode.png"),
      pay_Alipay: require("~/assets/img/支付宝.svg"),
      pay_Unionpay: require("~/assets/img/银联.svg"),
      pay_Purse: require("~/assets/img/purse.svg"),
      pay_success: require("~/assets/img/pay_success.svg"),
      pay_warning: require("~/assets/img/warning.svg"),
      pay_error: require("~/assets/img/error.svg"),
      active: 0,
      baseUrl: global.baseurl,
      payUrl: "http://mingyukehui.com",
      id: null,
      spanArr: [],
      pos: null,
      type: null,
      paying: 0,
      payCycle: null,
      payStartTime: null,
      payEndTime: null,
      isPayTimtOut: false,
      isEorror: false,
      isF: true,
      isGovBreaks: false,
      agentOrder: null,
      isZAorZB: {
        value: '',
        type: ''
      },
      money: 'money',
      pay_service_harge: 'pay_service_harge',
      // showRefund: false,
    };
  },

  created() {
    if(this.$route.query.active) {
      this.active = Number(this.$route.query.active)
    }  else if (this.$route.query.type == 'recharge' || this.$route.query.type == 'reward') {
      this.type = this.$route.query.type
      this.getRechargeData()
    }  else if (this.$route.query.type == 'buyVip') {
      this.type = this.$route.query.type
      this.getVipData()
    } else {
      this.getOrderData();
    }
  },
  computed: {
    payLogo: function() {
      if (this.payMethod == 2) {
        return this.pay_WeChat;
      } else if (this.payMethod == 3) {
        return this.pay_Alipay;
      } else if (this.payMethod == 1) {
        return this.pay_Unionpay;
      } else if (this.payMethod == 4) {
        return this.pay_Purse;
      }
    },
    payText: function() {
      if (this.payMethod == 2) {
        return "微信";
      } else if (this.payMethod == 3) {
        return "支付宝";
      } else if (this.payMethod == 1) {
        return "银联";
      } else if (this.payMethod == 4) {
        return '余额';
      }
    },
    showCancelPay: function () {
      if (this.active == 3) {
        return false
      } else if (this.active == 1) {
        if (this.payMethod == 3) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }

    },
    isShowPurse () {
      if (this.$store.state.user.role_id == 2) {
        if (this.$store.state.user.vip > 0) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
    showRefund: function() {

      if (this.$store.state.user.liaison && this.$store.state.user.liaison.organization) {
        if (this.$store.state.user.liaison.organization.search('协和') == -1 ) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    }
  },
  watch: {
    'jump_time':function(newVal,oldVal){
          if(newVal==0){
            this.cancelPay()
            // this.$router.push('/user/home/menu');
          }
    },
    tableData: {
      handler: function(val) {

        if (val.length && val[0].order_number) {
          let number = val[0].order_number
          if (number.slice(0, 2) == 'ZN') {
            this.$set(this.isZAorZB, 'value', '平台费')
            this.$set(this.isZAorZB, 'type', 'ZN')
          } else if (number.slice(0, 2) == 'ZY') {
            this.$set(this.isZAorZB, 'value', '代理费')
            this.$set(this.isZAorZB, 'type', 'ZY')
          } else {
            this.$set(this.isZAorZB, 'value', '代理费')
            this.$set(this.isZAorZB, 'type', 'PT')
          }

        } else {
          this.$set(this.isZAorZB, 'value', '代理费')
        }
        this.isF = val.every( (item) => {
          return item.type == 'F'
        })
        this.isGovBreaks = val.every( (item) => {
          return item.is_fee_reduction == 1
        })
      },
      deep: true,
      immediate: true
    },
    isZAorZB: {
      handler: function(val) {

      },
      immediate: true
    },
    payMethod: {
      handler: function(val) {
        if (val == 4) {
          if (this.type == 'buyVip' || this.type == null) {
            this.money = 'count_money'
          }
          this.pay_service_harge = 'count_pay_service_harge'
        } else {
          if (this.type == 'buyVip' || this.type == null) {
            this.money = 'money'
          }
          this.pay_service_harge = 'pay_service_harge'
        }
      }
    }
  },

  mounted() {
    // this.parentId = this.$store.state.user.id;
    setInterval(this.countDown,1000);
  },
  methods: {
     // 计时
     countDown(){
       let that = this;
       if( that.active == 3){
         that.jump_time--;
       }
    },
    previous() {
      this.active--
      if (this.isEorror) {
        this.isEorror = false
      }
    },
    refresh () {
      this.$router.go(0)
    },
    // 处理vip表格数据
    getVipData() {
      let params = {
      }
      this.$axios.get('api/pay/pay_vip_money_config').then( res => {
        if (res.data.code == 200) {
          if(process.client) {
            let vip = atob(this.$route.query.vip)
            let data = res.data.data
            let name = ''
            if (vip.slice(-1) == 1) {
              name = '铜牌会员'
            } else if (vip.slice(-1) == 2) {
              name = '银牌会员'
            }else if (vip.slice(-1) == 3) {
              name = '金牌会员'
            }else if (vip.slice(-1) == 4) {
              name = '钻石会员'
            }

            let item = {
              name: `升级${name}`
            }
            if (this.$store.state.user.role_id == 2) {
              if (this.$store.state.user.vip == 1) {
                item.name = '续费VIP'
              } else {
                item.name = '升级VIP'
              }

            }
            for(let key in data) {
              if (vip == key) {
                item.money = data[key][0]
                item.count_money = data[key][1]
              }
            }
            this.tableData.push(item)
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 处理充值确认订单数据
    getRechargeData() {
      let item = {
        name: null,
        money: 0
      }
      if(process.client) {
        item.money = atob(this.$route.query.money)
        if(this.type == 'recharge') {
          item.name = '余额充值'
        } else if (this.type == 'reward') {
          item.name = '打赏'
        }
        this.tableData.push(item)
      }

    },
    // 获取订单支付确认订单信息
    getOrderData() {
      let params = {};
      if (this.$route.query.order_id) {
        params.order_id = this.$route.query.order_id;
      } else if (this.$route.query.finals_id) {
        params.finals_id = this.$route.query.finals_id;
      }
      this.$axios
        .get("api/pay/pay_money_details", { params: params })
        .then(res => {
          if (res.data.code == 200) {
            // this.tableData.push(res.data.data)
            let data = []
            data.push(res.data.data)
            this.splitData(data);
            this.getSpanArr(data)
            this.tableData = data
            if(data[0].type == 'S'){
                this.order_type = '实用新型'
            } else if(data[0].type == 'F'){
                this.order_type = '发明专利'
            } else {
                this.order_type = '外观设计'
            }

          } else {
            this.$message.error("服务器繁忙，获取订单信息失败。");
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 去支付
    next() {
      if (this.active++ > 2) this.active = 0;

      if (this.active == 1) {
        // if (this.payMethod == 2) {
        //   this.$nextTick( () => {
        //     this.createQrCode("qrcode", this.payUrl)
        //   })
        // } else if (this.payMethod == 3) {
          this.pay()
        // }
      }
    },
    // 生成二维码
    createQrCode(refName, payUrl) {
      QRCode.toDataURL(this.$refs[refName], payUrl, {
        width: 240,
        height: 240
      })
        .then(url => {})
        .catch(err => {
          // this.openMessage(0, '生成二维码失败')
        });
    },
    // 支付
    pay(type) {
      if(this.type == 'recharge' || this.type == 'reward') {
        this.payRecharge()
      } else if (this.type == 'buyVip') {
        this.payVip()
      } else {
        this.payOrder()
      }
    },
    // 升级vip
    payVip() {
      let params = {
        front_url: `http://mingyukehui.com/payment?active=3&from=${this.$route.query.from}`,
        // front_url: `http://localhost:2000/payment?active=3&from=${this.$route.query.from}`,
        pay_type: this.payMethod,
        pay_device: "2",
        vip: atob(this.$route.query.vip)
      };
      this.$axios.get(`api/pay/pay_vip_order`, { params: params }).then(res => {
        // if (res.data.code == 200) {
        //   this.payRes(res)
        // } else {

        //   this.$message.error(res.data.message)
        // }
        this.payRes(res)
      });
    },
    // 充值支付
    payRecharge() {
      let params = {
        front_url: `http://mingyukehui.com/payment?active=3&from=${this.$route.query.from}`,
        // front_url: `http://localhost:2000/payment?active=3&from=${this.$route.query.from}`,
        pay_type: this.payMethod,
        pay_device: "2",
        money: atob(this.$route.query.money)
      };
      if (this.type == "reward") {
        params.business_type = 2
        if (this.$route.query.finals_id) {
          params.finals_id = this.$route.query.finals_id;
          params.order_id = this.$route.query.order_id;
        } else {
          params.order_id = this.$route.query.order_id;
        }
      }
      this.$axios.get(`api/pay/recharge_coin`, { params: params }).then(res => {
        this.payRes(res)
      });
    },

    // 案件支付
    payOrder () {
      let params = {
        front_url: `http://mingyukehui.com/payment?active=3&from=${this.$route.query.from}`,
        pay_type: this.payMethod,
        pay_device: "2"
      };
      params.order = this.$route.query.order;
      if (this.$route.query.finals_id) {
        params.finals_id = this.$route.query.finals_id;
      }
      this.$axios.get(`api/pay/order/${params.order}`, { params: params }).then(res => {
        this.payRes(res)
      });
    },
    payRes(res) {
      if (this.payMethod == 3) {
        let routerData = this.$router.resolve({path:'/payment/payForm',query:{ htmlData: res.data}})
        window.location.href = routerData.href
      } else if (this.payMethod == 2) {
        this.payStartTime = new Date().getTime()
        this.createQrCode("qrcode", res.data.data.wxpayresult)
        this.payCycle = setInterval(() => {
          this.payEndTime = new Date().getTime()
          let cha = this.payEndTime - this.payStartTime
          let timeoutMinute = Math.round((cha / (1000 * 60)))

          // 判断是否支付超时
          if (timeoutMinute == 5) {
            clearInterval(this.payCycle)
            this.isPayTimtOut = true
          }
          // 判断支付状态
          if (this.paying == 1) {
            clearInterval(this.payCycle)
            this.active = 3
          }
          this.payStatus(res.data.data)
        }, 2000);
      } else if (this.payMethod == 4) {
        if (res.data.code == 200) {
        this.active =  this.active + 2
        } else {
          // this.$message.error(res.data.message)
          this.$alert(res.data.message, '支付失败', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
          this.isEorror = true
        }

      }
    },
    // 查看支付状态
    payStatus(data) {

      let params = {
        goods_number: null,
        type: null
      }
      if (this.type == 'recharge' || this.type == 'reward') {
        params.type = 2
        params.goods_number = data.recharge.goods_number
      } else if (this.type == 'buyVip') {
        params.type = 3
        params.goods_number = data.recharge.goods_number
      } else {
        params.type = 1
        params.goods_number = data.orderPay.goods_number
      }
      this.$axios.get('api/pay/query_pay_status', {params: params}).then (res => {
        if (res.data.code == 200) {
          this.paying = res.data.data.status
        }
      })
    },
    // 回首页
    cancelPay() {
      clearInterval(this.payCycle)
      this.getMyinfo()
      this.$router.replace({
        path: this.$route.query.from
      })
    },
    async getMyinfo () {
      let myInfo = await getMyInfo(this.$axios);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data);
        // if(process.client) {
        //   window.localStorage.setItem('user', aes.Encrypt(JSON.stringify(myInfo.data.data)))
        // }
        this.$cookies.set('user', aes.Encrypt(JSON.stringify(myInfo.data.data)))
      }
    },
    continueApply() {
      this.$router.replace({
        path: '/user/apply'
      })
    },
    // 处理订单支付表格数据
    splitData(data) {
      let detailsData = data[0].details;
      for (let i = 0; i < detailsData.length; i++) {
        let item = {
          order_number: data[0].order_number,
          money: data[0].money,
          pay_service_harge: data[0].pay_service_harge,
          count_pay_service_harge: "0.00"
        };
        item.type = detailsData[i].type;
        item.agent_money = detailsData[i].agent_money;
        item.platform_money = detailsData[i].platform_money;
        item.reply_money = detailsData[i].reply_money;
        item.power_over_money = detailsData[i].power_over_money;
        item.gov_money = detailsData[i].gov_money;
        item.is_fee_reduction = detailsData[i].is_fee_reduction;
        item.count_money = detailsData[i].count_money;
        data.push(item)
      }
      data.splice(0, 1)
    },
    // 合并表格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      let colIndex = 4
      if (this.isZAorZB.type == "ZN") {
        colIndex = 5
      } else if (this.isZAorZB.type == "ZY") {
        colIndex = 5
      }
      if (columnIndex === 0) {
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === colIndex) {
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === colIndex + 1 ) {
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 处理合并表格数据
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].order_number === data[i - 1].order_number) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      console.log(this.spanArr)
    }
  }
};
</script>
<style lang='less' scoped>
.payment {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  background-color: #edf1f6;
  // background-color: white;
  position: relative;
  .payment_head {
    margin-bottom: 15px;
    margin-top: 20px;
    text-align: center;
    .logo {
      height: 50px;
      vertical-align: middle;
    }
    .tepayment_head_title {
      color:#393939;
      font-size: 20px;
    }
  }
  .el-table{
    margin: 20px 0 30px 0;
  }
  .el-radio.is-bordered{
    border: 1px solid white;
  }
  .payment_explain{
    // height: 60px;
    font-size: 14px;
    font-family:Source Han Sans CN;
    font-weight:300;
    margin: 15px 0;
  }
  .payment_content {
    background-color: white;
    padding: 30px 50px 50px 50px;
    font-size: 15px;
    position: relative;
    width: 70%;
    margin: 0 auto;
    .pay_confirm {
      margin-top: 15px;
      height: 600px;
      position: relative;

      .payMethod {
        margin-top: 10px;
        position: absolute;
        // bottom: 0;
      }
    }
    .pay {
      height: 400px;
    }
    .pay_success {
      height: 400px;
      position: relative;
      .pay_success_img {
        left: 50%;
        position: absolute;
        margin-top: 60px;
        transform: translate(-50%, 0);
        text-align: center;
        font-size: 18px;
        img {
          width: 150px;
        }
        .money {
          font-size: 18px;
          font-weight: 700;
        }
      }
      .btns {
        left: 50%;
        position: absolute;
        bottom: 0;
        transform: translate(-50%, 0);
      }
    }
    .payment_content_head {
      img,
      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
    .payment_content_qrcode {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 16px;
    }
    .payment_content_timeOut {
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 16px;
      img {
        width: 150px;
        margin-bottom: 20px;
      }
      .timeOut_btns {
        margin-top: 30px;
      }
    }
    .pay_logo {
      width: 30px;
      height: 30px;
    }
  }
  .payment_title{
    font-size: 18px;
    margin:10px 0;
    color: #393939;
  }
  .payment_btn{
    background-color: white;
    // padding: 50px 20px;
    float: right;
  }
  .payment_bottom {
    background-color: white;
    padding: 30px;
    font-size: 15px;
  }
  .warper {
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .payLogo {
    width: 30px;
    height: 30px;
  }
  .payLogo_purse {
    width: 30px;
    height: 30px;
  }

  .el-radio {
    height: 54px;
    margin-right: 0;
    .el-radio__label {
      display: inline-block;
      vertical-align: middle;

      img {
        vertical-align: middle;
      }
    }
  }

}
  .vip_Introduction {
    margin-top: 10px;
    ul {
      padding-left: 10px;
      li {
        list-style: none;
        span {
          font-size: 14px;
        }
      }
    }
  }
  /deep/ .payment_content{
    .el-step__title{
      color: #249DFF;
    }
    .el-step__icon.is-text{
      border-color: #249DFF;
    }
    .el-step__line{
      background-color: #249DFF;
    }
    .el-step__head.is-process{
      .el-step__icon{
        background-color: #249DFF;
      }
      .el-step__icon-inner{
        color: #ffffff;
      }
    }
    
  }
  
  // 订单信息
　.mailTable { 
    font-size: 15px; 
    color: #393939; 
    text-align: center;
    margin: 10px auto;
    width: 100%;
    border-spacing:0px;
  }
　.mailTable tr td { 
    border:0.5px solid #C4E5FF; 
    width: 33.3%; 
    height: 35px; 
    line-height: 35px; 
    box-sizing: border-box; 
    padding: 0 10px; 
  }
　.mailTable tr td.column { 
    background-color: #C4E5FF; 
    color: #393C3E; 
    border-color: #C4E5FF;
  }
  .column_money{
    color: #58A5EA;
    font-weight: bold;
  }
  .mailTable tr td.orderColor{
    color: #008B00;
    font-size: 18px;
    font-weight: 800;
  }
  .mailTable tr td.orderTitle{
    color: #363636;
    font-size: 16px;
    font-weight: 700;
  }

</style>
